<template>
	<!-- :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/szBg.png)'}]" -->
	<view class="number-bg" >
<!-- 		<cu-custom :isBack="true" style="background-color: transparent;" @click="aaa">
			<block slot="content">
				<view class="custom-title">个人数字ID</view>
			</block>
		</cu-custom> -->
		<view class="navigation">
			<view @click="handleGoHomeBtn">
				<uni-icons type="left" size="30"></uni-icons>
			</view>
			<view class="navigationTitle">个人数字ID</view>
		</view>
		<view class="padding-top-64 padding-left-32 padding-right-32 setContent">
			<view class="text-center">
				<image :src="avatar" style="border-radius: 50%;" class="img-144"></image>
			</view>
			<view class="num-content">
				<view class="num-name">{{nickname}}</view>
				<view class="num-text-desc">
					<view class="text-0101 text-sm">
						区块链地址:{{uuid}}
					</view>
					<view @click="copyAddress">
						<image src="https://txr001.zthj.net/static/img/numCopy.png" class="img-32"></image>
					</view>
				</view>
				<view class="flex align-center justify-center">
					<view class="num-ewm-bg" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/ewmBg.png)'}]">
						<view style="margin: 44rpx;">
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="uuid"  ></uqrcode>
					</view>
					</view>
				</view>
			</view>
			<view class="flex padding-top-172">
				<view class="flex-sub text-center sharebnt">
					<button class="not-show-but" type="default" open-type="share"></button>
					<image src="https://txr001.zthj.net/static/img/wx.png" class="img-120"></image>
					<view class="text-black text-sm padding-top-12">微信分享</view>
				</view>
				<view class="flex-sub text-center" @click="saveImg">
					<image src="https://txr001.zthj.net/static/img/saveFile.png" class="img-120"></image>
					<view class="text-black text-sm padding-top-12">保存图片</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				nickname:"",
				uuid:"",
				avatar:'https://txr001.zthj.net/static/img/avatar.png'
			}
		},
		onLoad() {
			this.getInfo();
		},
		//分享
		onShareAppMessage() {
			return {
				title: "青碟碳账户",
				path: "",
				imageUrl: '',
			}
		},
		methods: {
			aaa(){
				console.log('222')
			},
			//适用小程序和app的点击复制
			copyAddress() {
				uni.setClipboardData({
					data: this.uuid,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
									icon: 'none',
								});
							},
						});
					},
				});
			},
			
			getInfo:async function(){
				let res= await this.$api.getMineUuid();
				// console.log(res);
				this.nickname = res.nickname;
				this.uuid = res.uuid;
				this.avatar = res.avatar?res.avatar:'https://txr001.zthj.net/static/img/avatar.png';
			},
		   saveImg:function(){
			   this.$refs.uqrcode.save({
			     success: () => {
			       uni.showToast({
			         icon: 'success',
			         title: '保存成功'
			       });
			     }
			   });
		   },
		   share:function(){
			   this.$u.mpShare = {
			   	title: '青碟碳账户', // 默认为小程序名称，可自定义
			   	path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
			   	// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
			   	// 支持PNG及JPG，默认为当前页面的截图
			   	imageUrl: '' 
			   }
		   },
		   handleGoHomeBtn(){
			   uni.switchTab({
			   	url:'/pages/index/index'
			   })
		   }
		}
	}
</script>
<style>
	page{background-color: #fff;}
</style>
<style scoped lang="less">
	.sharebnt{
		position: relative;
		.not-show-but{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			opacity: 0;
			padding: 0;
			z-index: 1;
		}
	}
	.number-bg{
		background-size: 100% 100%;
		width: 100%;
		height: 1624rpx;
	}
	.num-content{
		background: #FFFFFF;
		border-radius: 48rpx;
		margin-top: -72rpx;
		padding:32rpx 32rpx 48rpx;
	}
	.num-name{
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
		padding-top: 60rpx;
		text-align: center;
	}
	.num-text-desc{
		background: #F0F0F0;
		border-radius: 16rpx;
		padding: 24rpx 16rpx;
		display: flex;
		align-content: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}
	.num-ewm-bg{
		background-size: 100% 100%;
		width: 488rpx;
		height: 488rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	.navigation{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		box-sizing: border-box;
		padding-top: 40rpx;
		background-color: #FFFFFF;
	}
	.navigationTitle{
		font-size: 34rpx;
		font-weight: 500;
		color: #26292C;
		position: fixed;
		left: calc(50% - 85rpx);
	}
	.setContent{
		margin-top: 100rpx;
	}
</style>